<template>
	<ynet-content id="operateMain" :headerInformation="true" :headerMenu="true">
        <div class="main-container">
			<ynet-breadcrumb></ynet-breadcrumb>
		</div>
		<div class="main-container lrb pt10" v-if="main">
            <div>
                <el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20">
                    <table>
                        <caption>Enquiry</caption>
                        <tr>
                            <td>Operator No.:</td>
                            <td>
                                <el-form-item prop="inputUserNo">
                                    <el-input v-model="queryForm.inputUserNo" @focus="cleanOther()"></el-input>
                                </el-form-item>
                            </td>
                            <td>Operator Name:</td>
                            <td>
                                <el-form-item prop="inputUserName">
                                    <el-input v-model="queryForm.inputUserName" @focus="cleanOther()"></el-input>
                                </el-form-item>
                            </td>					
                        </tr>
                    </table>
				</el-form>
			</div>
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="queryOperate()">Search</el-button>
                <el-button type="primary" @click="resetForm('queryForm')">Reset</el-button>
            </div>
            <div class="fourForm tableForm mt20 tableData">
                <el-table :data="imUserList"  @select="handleSelectChange">
                    <el-table-column type="selection" label="Select"></el-table-column>
                    <el-table-column prop="userNo" label="Operator No." align="center">
                        <template  scope="scope">
                            <el-button type="text" @click="openDetail(scope.row.userNo)" class="cBlue"><span>{{scope.row.userNo}}</span></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userAlias" label="Operator Name" align="center"></el-table-column>
                    <!--
                    <el-table-column prop="userName" label="操作员名称" align="center"></el-table-column>
                    -->
                    <el-table-column prop="branchName" label="Subbordiante to" align="center"></el-table-column>
                    <el-table-column prop="roleName" label="Operator Role" align="center"></el-table-column>
                    <el-table-column prop="userStt" label="Status" align="center">
                        <template  scope="scope">
                            {{$tools.dict.getUserStt(scope.row.userStt)}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页组件 -->
            <!--分页-->
            <div class="pagination tar mt20">
                <el-pagination  @current-change="handleCurrentChange" :current-page="Number(queryForm.currentPage)" :page-size="Number(queryForm.turnPageShowNum)" layout="total, prev, pager, next, jumper" :total="Number(turnPageTotalNum)">
            </el-pagination>
            </div>
            <!--分页--END-->
            <div class="btnArea mt20 tac">
                <el-button type="primary" @click="operateAdd()" >Add</el-button>
                <el-button type="primary" @click="operEdit()">Modify</el-button>
                <el-button type="primary" @click="confirmDialog()">Delete</el-button>
                <!--<el-button type="primary" @click="resetPwd">重置操作员密码</el-button>-->
            </div>
            
		</div>
        <!--授权确认页面弹窗-->
        <div>
            <ynet-authDialog ref="dialogTable"  @getAuthForm="getAuthForm"></ynet-authDialog>
        </div>
        <div class="main-container">
            <OperateAdd v-if="isAdd" @back="backMain"></OperateAdd>
            <OperDetail v-if="isDetail" :operInfoDetail="operInfoDetail" @back="backMain"></OperDetail>
            <OperateEdit v-if="isEdit" :operInfoDetail="operInfoDetail" @back="backMain"></OperateEdit>
        </div>
	</ynet-content>
</template>

<script>
	import OperateAdd from './components/operateAdd';
    import OperDetail from './components/operDetail';
    import OperateEdit from './components/operateEdit';
	export default {
		name:'operateMain',
		components:{
            OperateAdd,
            OperDetail,
            OperateEdit,
		},
		data(){
            return { 
                turnPageTotalNum:'',
                queryForm:{
                    inputUserNo:'',inputUserName:'',currentPage:'1',turnPageShowNum:'10'
                },
                rules:{
                    
                },
                tableData:[],
                isAdd:false,isDetail:false,isEdit:false,main:true,
                imUserList:[],//从后台查询的操作员信息数组
                operInfoDetail:{},
                selectData:[],
                rePwd:{actionFlag:'1',bsnCode:'IM0105',imUserInfoList:[],},
                delForm:{stt:'3',actionType:'2',imUserInfoList:[],bsnCode:'IM0103',},
                actionType:[],//删除还是重置密码
                dialogTableVisible:false,
                authForm: { authUserNo: '', password: '',randomField:''},//授权数据
                needAuth:'',
                authType:'',
            }
            
        },
		methods:{
            confirmDialog(){//删除确认弹窗
				if(this.selectData.length>0){
					this.$confirm('Confirm to delete',{
						confirmButtonText:'Confirm',
						cancelButtonText:'Cancel',
						type:'warning'
					}).then(()=>{
						this.queryAuth();
					}).catch(()=>{

					})
				}else{
					this.$alert('select at least one',{
						confirmButtonText:'Confirm'
					})
				}
			},
            backMain(){
                this.selectData=[];
                this.operInfoDetail={};
                this.queryOperate();
                this.main=true;
                this.isAdd=false;
                this.isDetail=false;
                this.isEdit=false;
            },
            getAuthForm(val){
                //获取授权数据
                this.authForm=val;
                console.log("val:"+JSON.stringify(val))
                this.delForm=$.extend({},this.delForm,this.authForm)
                this.delOper()  //自己页面提交给后台的.do方法
            },
            queryAuth(formName){//查询授权模式
                if(this.selectData.length!=0){
                    let body={};body.bsnCode="IM0103";body.version="IM0103",
                    this.$tools.request(this,"IM010001Action.do",body).then(data=>{
                        //console.log("authData:"+JSON.stringify(data))
                        if(data.body.errorCode==0){
                            if(data.body.needAuth==0){//无需授权
                                this.delOper()
                            }else if(data.body.needAuth==1 && data.body.authType==1){
                                this.needAuth=1;
                                this.authType=1;
                                this.$refs["dialogTable"].show()
                            }else if( data.body.needAuth==1 && data.body.authType==2 ){
                                this.needAuth=1;
                                this.authType=2;
                                this.delOper()
                            }else{
                                this.$alert('Authorization Type Error', {
                                    confirmButtonText: 'Confirm',
                                    callback: action => {
                                    }
                                });
                            }
                        }else{
                            this.$alert("System Error Try again", "warning",{
                                confirmButtonText: 'Confirm',
                                callback: action => {
                                }
                            })
                        }
                        
                    })
                }else{
                    this.$alert('please select data', {
                        confirmButtonText: 'Confirm',
                        callback: action => {
                        }
                    });
                }
			},
            delOper(){//删除操作员
                this.delForm.imUserInfoList=this.selectData;
                //console.log("delForm:"+JSON.stringify(this.delForm))
                this.$tools.request(this,"IM010302Action.do",this.delForm).then(data=>{
                    //console.log("data:"+JSON.stringify(data))
                    if(data.body.errorCode==0){
                        this.modifyVisible =false 
                        if(this.needAuth==1 && this.authType==2){
                            this.$message({
								type:'success',
								message:'Waiting for Authorized'
							})
                            this.queryOperate()
                        }else if(this.needAuth==1 && this.authType==1){
                            if(data.body.authStatus==1){
                                this.$message({
                                    type:'warning',
                                    message:'Authorship No. or password wrong ,please resume load',
                                    showClose:true,
                                })
                                this.queryOperate()
                            }else{
                                 this.$message({
                                    type:'success',
                                    message:'Delete Success',
                                    showClose:true,
                                })
                                this.queryOperate()
                            }
                        }else{
                            this.$message({
                                type:'success',
                                message:'Delete Success',
                                showClose:true,
                            })
                            this.queryOperate()
                        }
                    }else{
                        if(data.body.errorCode=="SYEC0001"){
                            this.$alert("System Error Try again", "warning",{
                                confirmButtonText: 'Confirm',
                                callback: action => {
                                }
                            })
                        }else{
                            this.$alert(data.body.errorMsg, "warning",{
                                confirmButtonText: 'Confirm',
                                callback: action => {
                                }
                            })
                        }
                        
                    }
                })
            },
            
            resetForm(formName){//清空
                this.$refs[formName].resetFields();
                 this.tableData=[];
            },
            openDetail(val){
                //点击客户号显示详情
                for(let i=0;i<this.imUserList.length;i++){
                    if(this.imUserList[i].userNo==val){
                        this.operInfoDetail=this.imUserList[i];
                        break;
                    }
                }
                this.main=false;
                this.isDetail=true;
            },
            queryOperate(){
                this.$tools.request(this,"IM010301Action.do",this.queryForm).then(data=>{
                    if(data.body.errorCode==0){
                        this.imUserList=data.body.imUserList;
                        this.turnPageTotalNum=data.body.turnPageTotalNum;
                    }else{
                        this.$alert("System Error Try again","warning",{
                            confirmButtonText: 'Confirm',
                            type:'warning',
                            callback: action => {
                            }
                        })
                    }
                })
               
            },
            operateAdd(){
                this.isAdd=true;
                this.main=false;
                this.isEdit=false;
                this.isDetail=false;
            },
            operEdit(){
                if(this.selectData.length!=1){
                    this.$alert("please selected","notice",{
                        confirmButtonText: 'confirm',
                        callback: action => {
                        }
                    })
                }else{
                    this.operInfoDetail=this.selectData[0];
                    this.main=false;
                    this.isAdd=false;
                    this.isEdit=true;
                }
            },
            handleSelectChange(val){
                this.selectData=val;
                console.log("selectData:"+JSON.stringify(this.selectData))
            },
            cleanOther() {
				let _this = this
				_this.$refs.queryForm.resetFields()
                this.queryForm.inputUserNo='';
                this.queryForm.inputUserName='';
                //this.imUserList=[];
			},
            handleCurrentChange(val) {//分页方法
                this.queryForm.currentPage=val;
                this.queryOperate()
            },
		}
	}
</script>